<template>
  <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  data1: {
    type: Array,
    default: () => [],
  },
  data2: {
    type: Array,
    default: () => [],
  },
  data3: {
    type: Array,
    default: () => [],
  },
})
const value = 80
const rate = Math.round((value * 100) / 100)
const option = {
  title: [
    {
      text: '{a|' + rate + '}',
      show: true,
      x: 'center',
      y: '25%',
      textStyle: {
        rich: {
          a: {
            fontSize: 20,
            color: '#FFFFFF',
            fontWeight: 'bold',
          },
        },
      },
    },
    {
      text: '赋值覆盖率',
      x: 'center',
      y: 'center',
      borderColor: '#fff',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 15,
        color: '#fff',
      },
    },
  ],
  polar: {
    center: ['50%', '50%'],
    radius: ['70%', '100%'],
  },
  angleAxis: {
    max: 100,
    show: false,
  },
  radiusAxis: {
    type: 'category',
    show: true,
    axisLabel: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      data: [value],
      name: '',
      type: 'bar',
      roundCap: true,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(19, 84, 146, .4)',
      },
      coordinateSystem: 'polar',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: '#005DCF',
            },
            {
              offset: 1,
              color: '#00CCFF',
            },
          ]),
        },
      },
    },
  ],
}

const chart = ref()
onMounted(() => {
  chart.value.removeAttribute('_echarts_instance_')
  const myChart = echarts.init(chart.value)
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    // 在窗口尺寸变化时重新刷新图表
    myChart.resize()
  })
})
</script>
<style scoped lang="scss">
.chart-render-box {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>
